/* 时期 */
<template>
  <div class="datepicker-config">
    <je-form-item label="选择器" name="dateType">
      <je-select
        v-model:value="formState.dateType"
        :options="options"
        @select="changeValue"
      ></je-select>
    </je-form-item>
  </div>
</template>
<script>
  import { defineComponent, reactive, watch, ref, onMounted } from 'vue';
  import { Form, Select } from '@jecloud/ui';
  import { decode } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';

  export default defineComponent({
    name: 'DatepickerConfig',
    components: {
      JeFormItem: Form.Item,
      JeSelect: Select,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
      xtype: {
        type: String,
        default: '',
      },
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const formState = reactive({
        dateType: config.dateType || '', //选择器
      });
      const options = ref([]);
      //下拉框数据
      if (props.xtype == 'datefield') {
        options.value = [
          { value: 'year', label: '年' },
          { value: 'quarter', label: '季度' },
          { value: 'month', label: '月' },
          { value: 'week', label: '周' },
          { value: 'date', label: '日期' },
          { value: 'dateTime', label: '日期时间' },
          // { value: 'rangeDate', label: '日期多选' },
        ];
      } else if (props.xtype == 'rangedatefield') {
        options.value = [
          { value: 'year', label: '年' },
          { value: 'month', label: '月' },
          { value: 'week', label: '周' },
          { value: 'date', label: '日期' },
          { value: 'dateTime', label: '日期时间' },
        ];
      }
      watch(
        () => formState,
        () => {
          parentContext.setConfig(formState);
        },
        { deep: true },
      );
      const changeValue = (value) => {
        formState.dateType = value;
      };
      onMounted(() => {
        !formState.dateType && changeValue('dateTime');
      });
      //暴露表单值用于父组件赋值
      expose({
        formState,
      });

      return { formState, options, changeValue };
    },
  });
</script>
<style lang="less" scoped></style>
